<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
      width: 200px;
      /* drop-shadow() 函数用于沿着图像的轮廓生成阴影效果 */
      /* filter: drop-shadow(10px 10px 5px skyblue); */
      /* filter: drop-shadow(0px 0px 8px #4444dd); */
      box-shadow:0px 0px 8px #4444dd
    }
</style>
<body>
    <!-- 
        TIP

        drop-shadow() 函数用于设置图像轮廓阴影，其用法与 box-shadow 属性类似，但有以下 4 个区别

        drop-shadow 不支持内阴影
        drop-shadow 属性在部分浏览器中，不支持设置阴影的扩散半径
        drop-shadow 常用于设置图标、不规则图形，文字的阴影。box-shadow 更适合矩形盒子模型阴影的设置
        drop-shadow 设置阴影实际上是是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面，所以性能消耗比较大。而box-shadow 性能消耗较低
    -->
    <img src="/src/img/css3/下载.png" alt="">
</body>
</html>